<style>
	@import "../../../static/z39pc/fonts/iconfont.css";
</style>
<template>
	<div class="task-detail" v-loading="loading">
		<div class="task-detail-header">
			任务详情
			<span class="el-icon-close" @click="closeTaskDetail()"></span>
		</div>
		<div class="task-detail-body" :style="{'height':(taskDetailHeight - (selectedTask.state=='started'||selectedTask.state=='toggle'?230:85) + 'px')}" id="taskDetailBody">
			
			<div class="header-top">
				<div class="title">
					<el-button size="small" type="primary" v-loading="btnLoading" @click="saveTask()" v-show="!(selectedTask.title==taskBigTitle&&selectedTask.desc==taskDesc)">保存</el-button>
					<el-input placeholder="标题" v-model="taskBigTitle"></el-input>
				</div>
				<div class="desc">
					<el-input type="textarea" :rows="4" v-model="taskDesc" placeholder="描述信息" resize="none">
					</el-input>
				</div>
				<div class="time">
					<ul>
						<li @click="memberDialogVisible=true"><span class="iconfont icon-zhaopin1"></span>{{detailObj.leader.nname||'负责人'}}</li>
						<li @click="timeDueDialogVisible=true"><span class="iconfont icon-pingguhuizhang"></span>{{(detailObj.due&&detailObj.due.split(' ')[1])||'时间'}}</li>
						<li @click="timeNeedDialogVisible=true"> <span class="iconfont icon-shalou1"></span>{{detailObj.need||'评估'}}</li>
						<li ><span class="icon iconfont icon-shizhong"></span>{{detailObj.clock||'闹钟'}}</li>
					</ul>
				</div>
				<div class="tag-container">
					<ul @click="showSetTagDialog()">
						<li><span class="iconfont icon-add4"></span>添加</li>
						<li v-for="(item,index) in detailObj.tagsArr" v-if="systemTags.indexOf(item.key)<0">
							<!--{{tagsRepeatDic[item.value]}}-->
							{{(item.key=='repeat'&&tagsRepeatDic[item.value])?tagsRepeatDic[item.value]:item.name}}<!--重复任务标签-->
						</li>
					</ul>
				</div>
			</div>
			
			<div class="header-middle">
				<el-button size="small" type="primary" v-loading="btnLoading" @click="addTask()" v-show="taskSmallTitle!=''">创建</el-button>
				<span class="el-icon-circle-cross"></span>
				<el-input placeholder="新建子任务" v-model="taskSmallTitle"></el-input>
			</div>

			<div class="header-bottom" v-show="childrenList.length>1">
				<ul class="children-list">
					<li v-for="(item,index) in childrenList" @click="changeTask(item)" >
						<div style="font-weight: bold;">
							<span :class="item.id==selectedTask.id?'selected':'not-selected'"></span><el-checkbox v-model="item.finished" @change="changeTaskStatusBox(item,item.finished)" style="margin-right: 10px;"></el-checkbox>{{item.title}}
						</div>
					</li>
				</ul>
				<!--<div class="dynamic">
					<div class="title">
						<span>动态</span><span style="float:right">显示操作记录</span>
					</div>
					<div class="dynamic-content">
						<ul>
							<li>
								<img src="../../../static/images/_large_avatar155568.png" alt="" />
								<div>
									<p><span class="dynamic-user-name">王小儿</span><span class="dynamic-time">02-10 18:20</span></p>
									<p>打飞机啊的合法好的法律阿斯顿放假咯是否啊是符合阿斯弗阿三</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="send-message">
					
				</div>-->
			</div>
			
		</div>
		<div class="header-top time-remind" v-if="selectedTask.state=='started'||selectedTask.state=='toggle'">
				<div class="cal-timer">
					{{clockParams.remainTime}}
				</div>
				<div class="time" style="border-bottom: 0;">
					<ul>
						<li>{{(clockParams.dueTime&&clockParams.dueTime.split(' ')[1])||''}}</li>
						<li>{{(clockParams.finishTime&&clockParams.finishTime.split(' ')[1])||''}}</li>
						<li>app震动</li>
						<li @click="timeAddDialogVisible=true">加时</li>
					</ul>
				</div>
			</div>
		<div class="task-detail-footer">
			<el-button type="primary" size="small" v-if="selectedTask.state!='started'&&selectedTask.state!='toggle'&&selectedTask.state!='done'" @click="changeTaskState('started')">开始</el-button>
			<el-button type="primary" size="small" v-if="selectedTask.state=='toggle'" @click="changeTaskState('toggle')">继续</el-button>
			<el-button type="primary" size="small" v-if="selectedTask.state=='started'" @click="changeTaskState('toggle')">暂停</el-button>
			<el-button type="primary" size="small" v-if="selectedTask.state=='done'" @click="changeTaskState('cancelled')">取消</el-button>
			<el-button type="primary" size="small" v-if="selectedTask.state!='done'" @click="changeTaskState('done')">完成</el-button>
			<el-button type="primary" size="small">求助</el-button>
		</div>

		<!--选择need时间-->
		<el-dialog title="选择时间" :visible.sync="timeNeedDialogVisible" size="tiny">
			<el-time-select style="margin:0 auto;" v-model="selectTimeNeed" :editable="false" :picker-options="{
		    start: '00:00',
		    step: '00:15',
		    end: '24:00'
		  }" placeholder="选择评估时间"></el-time-select>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="timeNeedDialogVisible = false" size="small">取 消</el-button>
		    <el-button type="primary"  size="small" @click="setTimeNeed()">确 定</el-button>
		  </span>
		</el-dialog>
		<!--选择加时时间-->
		<el-dialog title="选择时间" :visible.sync="timeAddDialogVisible" size="tiny">
			<el-time-select style="margin:0 auto;" v-model="selectTimeAdd" :editable="false" :picker-options="{
		    start: '00:00',
		    step: '00:05',
		    end: '24:00'
		  }" placeholder="选择加时时间"></el-time-select>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="timeAddDialogVisible = false" size="small">取 消</el-button>
		    <el-button type="primary"  size="small" @click="setTimeAdd()">确 定</el-button>
		  </span>
		</el-dialog>
		<!--选择due时间-->
		<el-dialog title="选择时间" :visible.sync="timeDueDialogVisible" size="tiny">
			<el-date-picker v-model="selectTimeDue" align="right" type="datetime" placeholder="选择日期"></el-date-picker>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="timeDueDialogVisible = false" size="small">取 消</el-button>
		    <el-button type="primary"  size="small" @click="setTimeDue()">确 定</el-button>
		  </span>
		</el-dialog>
		<!--选择负责人-->
		<el-dialog title="选择负责人" :visible.sync="memberDialogVisible" size="tiny">
			<el-select v-model="selectedMember" filterable='' placeholder="请选择负责人" style="width: 100%;">
				<el-option v-for="item in memberList" key="to" :label="item.nname" :value="item.fuid">
				</el-option>
			</el-select>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="memberDialogVisible = false" size="small">取 消</el-button>
			    <el-button type="primary"  size="small" @click="setTaskMember()">确 定</el-button>
			  </span>
		</el-dialog>
		<!--选择标签-->
		<el-dialog title="添加标签" :visible.sync="tagDialogVisible" class="tmp-dialog">
			<h6>常用标签</h6>
			<div>
				<div class="all-tag">
					<span v-for="(item,index) in commonTagsList" :class="item.active?'active':''" @click="tagsClick(item,'common')">{{item.name}}</span>
				</div>
			</div>
			<h6 style="margin-top:10px">项目标签</h6>
			<div>
				<div class="all-tag">
					<span v-for="(item,index) in projects" :class="item.active?'active':''" @click="tagsClick(item,'project')">{{item.title}}</span>
				</div>
			</div>
			<h6 style="margin-top:10px">重复任务</h6>
			<div>
				<div class="all-tag">
					<span v-for="(item,index) in tagsRepeatList" :class="item.active?'active':''" @click="tagsClick(item,'repeat')">{{item.name}}</span>
				</div>
			</div>
			<h6 style="margin-top:10px">所有标签</h6>
			<div>
				<div class="all-tag">
					<span v-for="(item,index) in allTags" :class="item.active?'active':''" @click="tagsClick(item,'all')">{{item.name}}</span>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="tagDialogVisible = false" size="small">取 消</el-button>
				<el-button type="primary" @click="setTaskTag()" size="small">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import api from '../../api';
	import moment from "moment";
	import {
		mapState,
		mapActions
	} from 'vuex'
	import { taskAndTag } from "../../common/mixin";
	import { mixinPc } from "../../common/mixinPc";

	var initPage = function() {
//		setTimeout(function() {
//			$('.task-main-container .task-detail-body').css({
//				height: $('.task-detail-container').height() - 80 + 'px'
//			})
//		}, 1000)

	}
	export default {
		name: 'taskDetail',
		data() {
			return {
				taskDetailHeight:'',
				taskDetail: '',
				btnLoading: false,
				loading: false,
				taskBigTitle: '',
				taskDesc: '',
				taskSmallTitle: '',
				parentTask: '',
				childrenList: '',
				showClock:false,
				clockParams:{
					dueTime:'',
					finishTime:'',
					remainTime:'00:00:00'
				},
				clockTimer:'',
				selectedTask: '', //被选中的任务
				timeNeedDialogVisible: false,
				selectTimeNeed: '', //选中的need时间
				timeDueDialogVisible: false,
				selectTimeDue: '', //选中的due时间
				selectTimeAdd: '', 
				timeAddDialogVisible:false,//选择加时时间 
				memberDialogVisible: false, //成员dialog
				memberList: [],
				selectedMember: '',
				tagDialogVisible: false, //标签dialog
				allTags: [],
				memberListDic: {},
				notShowTagsArr: [], // 任务不显示的标签
				tagsRepeatList: [{
					name: "每天",
					key: "repeat",
					active: false,
					value: 'D'
				}, {
					name: "每周1",
					key: "repeat",
					active: false,
					value: 'W1'
				}, {
					name: "每周2",
					key: "repeat",
					active: false,
					value: 'W2'
				}, {
					name: "每周3",
					key: "repeat",
					active: false,
					value: 'W3'
				}, {
					name: "每周4",
					key: "repeat",
					active: false,
					value: 'W4'
				}, {
					name: "每周5",
					key: "repeat",
					active: false,
					value: 'W5'
				}, {
					name: "每周6",
					key: "repeat",
					active: false,
					value: 'W6'
				}, {
					name: "每周日",
					key: "repeat",
					active: false,
					value: 'W7'
				}, {
					name: "每月",
					key: "repeat",
					active: false,
					value: 'M'
				}, {
					name: "每年",
					key: "repeat",
					active: false,
					value: 'Y'
				}],
				tagsRepeatDic:{},
				commonTagsList:[],
				detailObj: {
					taskId:'',
					leader: '',
					due: '',
					need: '',
					clock: '',
					tagsArr: [],
					tagsObj: {}
				},
				systemTags: ["need", "used", "created", "started", "done", "toggle", "cancelled", "due","to"],
			}

		},
		mixins: [taskAndTag, mixinPc],
		computed: {
			...mapState({
				uid: state => state.vux.uid,
				taskAll: state => state.z39.taskAll,
				tagDic: state => state.z39.tagDic,
				taskDic: state => state.z39.taskDic,
				tagitems: state => state.z39.tagitems,
				tagitemDic: state => state.z39.tagitemDic,
				members: state => state.z39.members,
				memberDic: state => state.z39.memberDic,
				projects: state => state.z39.projects,
			})
		},
		watch: {
			"selectedTask": {
				handler() {
					this.detailObj.leader = (this.selectedTask.tags && this.selectedTask.tags.to && this.memberListDic['fuid_' + this.selectedTask.tags.to]) || "";
					this.detailObj.due = (this.selectedTask.tags && this.selectedTask.tags.due) || '';
					this.detailObj.need = (this.selectedTask.tags && this.selectedTask.tags.need) || '';
					
					this.detailObj.tagsObj = Object.assign({}, this.selectedTask.tags);
					
					this.setClockParams();
				},
				deep: true,
			},
			"selectedTask.id":function(){
				var _this=this;
				this.detailObj.tagsArr = [];
				if(!this.selectedTask.id){
					return;
				}
				
				api.taskGet({
					id: this.selectedTask.id
				}).then(data => {
					_this.detailObj.tagsArr=data.data.tags;
//					_this.selectedTask.state=data.data.state;
				})
			},
			taskDic:{
				handler() {
					if(this.selectedTask){
						this.selectedTask.state=this.taskDic[this.selectedTask.id].state
						this.selectedTask.finished=this.taskDic[this.selectedTask.id].finished
					}
				},
				deep: true,
			},
			'members': function() {
				var _this = this;
				this.memberList = this.members;
				this.memberList.forEach(function(item) {
					_this.memberListDic['fuid_' + item.fuid] = item;
				})
			},
			projects: function() {
				this.projects.forEach(item => {
					this.$set(item, 'active', false)
				})
			}
		},
		methods: {
			setClockParams:function(){
				this.clockParams.dueTime=this.detailObj.due||'';
				this.clockParams.remainTime='00:00:00';
				this.clockParams.finishTime='';
				if(this.clockParams.dueTime&&this.detailObj.tagsObj.need){
					var temp=this.detailObj.tagsObj.need.split(':');
					var finishMom=moment(this.detailObj.due).add(temp[0],'h').add(temp[1],'m')
					this.clockParams.finishTime=finishMom.format('YYYY-MM-DD HH:mm');
					var usedTime=this.detailObj.tagsObj.used;
					var remainTime=this.detailObj.tagsObj.need;
					if(usedTime){
						remainTime=this.formatTimeNeed(usedTime,remainTime,'minus')
					}
					if(remainTime.split(':').length==2){
						remainTime+=':00';
					}
					this.clockParams.remainTime=remainTime
				}
			},
			showTaskDetail: function(taskId) {
				this.showClock=false;
				this.loading = true;
				this.resetForm();
				var _this = this;
				this.taskDetail = this.taskDic[taskId]
				api.taskGet({
					id: taskId
				}).then(data => {
					this.loading = false;
					if(data.errno != 0) {
						_this.showNotice(data.errmsg, 'warning');
						return Promise.reject(data.errmsg);
					}
					data = data.data;
					//添加到stroe
					let childtasks = data.tasks || [];
					let allTasks = [data].concat(childtasks);
					allTasks.forEach(function(item) {
						item.tagsArr = item.tags;
					})
					_this.$store.commit({
						type: "z39/taskToDB",
						tasks: allTasks,
						act: "add"
					});
					_this.$store.commit({
						type: "z39/taskCurr",
						task: data
					});
					//end
					_this.parentTask = data
					_this.taskBigTitle = data.title;
					_this.taskDesc = data.desc;
					
					allTasks.forEach(function(item, index) {
						if(index==0){
							_this.selectedTask = item;
						}
						if(item.state=='done'){
							item.finished = true;
						}else{
							item.finished = false;
						}
					})
					_this.childrenList = allTasks

				})
			},
			resetForm: function() {
				this.taskBigTitle = '';
				this.taskDesc = '';
				this.childrenList = '';
				this.selectedTask=''
				this.detailObj = {
					taskId:'',
					leader: '',
					due: '',
					need: '',
					clock: '',
					tagsArr: [],
					tagsObj: {}
				}
				this.allTags = this.tagitems.map(function(item, index, arr) {
					var item1 = Object.assign({}, item)
					item1['active'] = false
					return item1;
				})
			},
			changeTask: function(item) {
				clearInterval(this.clockTimer)
				this.taskBigTitle = item.title;
				this.taskDesc = item.desc;
				this.selectedTask = item;
			},
			addTask: function() {
				var _this = this;
				if(!this.taskSmallTitle) {
					this.$message({
						message: '请输入任务标题',
						type: 'warning'
					});
					return;
				}
				this.btnLoading = true;
				api.taskAdd({
					parid: this.parentTask.id,
					title: this.taskSmallTitle,
					desc: ''
				}).then(data => {
					_this.btnLoading = false;
					if(data.errno != 0) {
						_this.showNotice(data.errmsg, 'warning');
						return Promise.reject(data.errmsg);
					}
					_this.taskSmallTitle = '';
					data = data.data;
					data.finished = false;
					_this.childrenList.push(data);
					_this.$store.commit({
						type: "z39/taskToDB",
						tasks: [data],
						act: "add"
					});
				})
			},
			delTask: function() {
				var _this = this;
				var isParent = false;
				if(this.selectedTask.id == this.parentTask.id) {
					isParent = true;
				}
				_this.btnLoading = true;
				api.taskDel({
					id: this.selectedTask.id
				}).then(data => {
					_this.btnLoading = false;
					if(data.errno != 0) {
						_this.showNotice(data.errmsg, 'warning');
						return Promise.reject(data.errmsg);
					}
					if(isParent) {
						_this.$store.commit({
							type: "z39/taskToDB",
							tasks: [{
								id: id
							}],
							act: "del"
						});
					} else {
						_this.childrenList = _this.childrenList.filter(function(item) {
							return item.id != _this.selectedTask.id;
						})
						_this.childrenList[0].checked = true;
					}

				})
			},
			saveTask: function() {
				var _this = this;
				this.btnLoading = true;
				//设置任务
				var taskParams={
					title: this.taskBigTitle,
					desc: this.taskDesc,
					id: this.selectedTask.id
				};
				if(this.selectedTask.pid&&!this.detailObj.tagsObj['pid']){
					//如果原先有项目id现在没有
					taskParams.pid=null;
				}else{
					taskParams.pid=this.detailObj.tagsObj['pid']
				}
				this.taskSet(taskParams, this.selectedTask)
				//先循环自带的tag,如果没有就删除
				this.selectedTask.tagsArr && this.selectedTask.tagsArr.forEach(function(item) {
					//key为due need to时需要判断
					if(item.key == 'due' || item.key == 'need' || item.key == 'to') {
						return false;
					} else if(_this.detailObj.tagsObj[item.key] == undefined) {
						if(_this.tagDic[_this.selectedTask.id + '_' + item.key]) {
							_this.tagDel(_this.tagDic[_this.selectedTask.id + '_' + item.key], true, _this.selectedTask);
						}

					}

				})
				//再循环新增的tag,如果没有就添加
				this.detailObj.tagsArr.forEach(function(item) {
					//key为due need to时需要判断
					if(item.key == 'due' || item.key == 'need' || item.key == 'to') {
						return;
					} else if(_this.selectedTask.tags[item.key] == undefined) {
						//如果没有就新增
						_this.tagAdd({
							taskid: _this.selectedTask.id,
							key: item.key,
							value: item.value
						}, true, _this.selectedTask)
					} else if(item.value != _this.selectedTask.tags[item.key]) {
						//如果有但不一样，就要做修改
						if(item.key=='repeat'){
							_this.doTagSet(_this.selectedTask, item.key,_this.detailObj.tagsObj[item.key], false)
						}else{
							_this.doTagSet(_this.selectedTask, item.key,item.value, false)
						}
					}

				})
				//key为due need to时需要判断
				if(this.detailObj.due && !(this.selectedTask.tags && this.selectedTask.tags.due && this.detailObj.due == this.selectedTask.tags.due)) {
					_this.doTagSet(_this.selectedTask, 'due', _this.detailObj.due, false)
				}
				if(this.detailObj.need && !(this.selectedTask.tags && this.selectedTask.tags.need && this.detailObj.need == this.selectedTask.tags.need)) {
					_this.doTagSet(_this.selectedTask, 'need', _this.detailObj.need, false)
				}
				if(this.detailObj.leader && !(this.selectedTask.tags && this.selectedTask.tags.to && this.detailObj.leader.fuid == this.selectedTask.tags.to)) {
					_this.doTagSet(_this.selectedTask, 'to', _this.detailObj.leader.fuid, false)
				}
				var btnTimer = setTimeout(function() {
					clearTimeout(btnTimer)
					_this.btnLoading = false;
				}, 1000)

			},
			setTimeNeed: function() {
				if(!this.selectTimeNeed) {
					this.showNotice('请选择时间', 'warning')
					return;
				}
				this.timeNeedDialogVisible = false;
				this.detailObj.need = this.selectTimeNeed;
				this.saveTask()
			},
			timerInterval:function(time){
				var _this=this;
				var rTime=time;
				var eTime='00:00:00';
				clearInterval(this.clockTimer)
				if(rTime!='00:00:00'){
					this.clockTimer=setInterval(function(){
						if(rTime=='00:00:00'){
							clearInterval(_this.clockTimer)
							return ;
						}
						var temp1=rTime.split(':')
						var h1=Number(temp1[0]),m1=Number(temp1[1]),s1=Number(s1=temp1[2])
						var allSeconds=h1*3600+m1*60+s1;
						allSeconds--;
						var h2=parseInt(allSeconds/3600);
						var m2=parseInt((allSeconds-h2*3600)/60);
						var s2=allSeconds-h2*3600-m2*60;
						h2=(String(h2).length<2?('0'+h2):h2);
						m2=(String(m2).length<2?('0'+m2):m2);
						s2=(String(s2).length<2?('0'+s2):s2);
						rTime=h2+':'+m2+':'+s2;
						_this.clockParams.remainTime=h2+':'+m2+':'+s2;
					},1000)
				}
				
			},
			formatTimeNeed:function(begin,end,type){
				var temp1=begin.split(':');
				var temp2=end.split(':')
				if(type=='add'){
					var h=Number(temp1[0])+Number(temp2[0]);
					var m=Number(temp1[1])+Number(temp2[1]);
					var s=Number(temp1[2]||0)+Number(temp2[2]||0);
					if(s>=60){
						m=m+1;
						s=s-60;
					}
					if(m>=60){
						h=h+1;
						m=m-60;
					};
					h=(String(h).length<2?('0'+h):h);
					m=(String(m).length<2?('0'+m):m);
					s=(String(s).length<2?('0'+s):s);
					return (h+":"+m);
				}else if(type=='minus'){
					var h1=Number(temp1[0]),h2=Number(temp2[0]);
					var m1=Number(temp1[1]),m2=Number(temp2[1]);
					var s1=Number(temp1[2]||0),s2=Number(temp2[2]||0);
					var allS=h2*3600+m2*60+s2-h1*3600-m1*60-s1;
					var h3=parseInt(allS/3600);
					var m3=parseInt((allS-h3*3600)/60);
					var s3=allS%60;
					if(m3<0||h3<0||s3<0){
						return '00:00:00'
					}
					h3=(String(h3).length<2?('0'+h3):h3);
					m3=(String(m3).length<2?('0'+m3):m3);
					s3=(String(s3).length<2?('0'+s3):s3);
					console.log(h3+":"+m3+":"+s3)
					return (h3+":"+m3+":"+s3);
				}
			},
			setTimeAdd: function() {
				if(!this.selectTimeAdd) {
					this.showNotice('请选择时间', 'warning')
					return;
				}
				this.timeAddDialogVisible = false;
				var timeNeed=this.selectTimeAdd;
				if(this.selectedTask.tags&&this.selectedTask.tags.need){
					timeNeed=this.formatTimeNeed(timeNeed,this.selectedTask.tags.need,'add')
				}
				this.doTagSet(this.selectedTask, 'need', timeNeed, false)
				this.saveTask()
			},
			setTimeDue: function() {
				if(!this.selectTimeDue) {
					this.showNotice('请选择时间', 'warning')
					return;
				}
				this.timeDueDialogVisible = false;
				this.detailObj.due = moment(this.selectTimeDue).format('YYYY-MM-DD HH:mm');
				this.saveTask()
			},
			setTaskMember: function() {
				this.memberDialogVisible = false;
				this.detailObj.leader = this.memberListDic['fuid_' + this.selectedMember]
				this.saveTask()
			},
			showSetTagDialog: function() {
				this.notShowTagsArr = [];
				var _this = this;
				this.tagDialogVisible = true;
				this.detailObj.tagsArr.forEach(item => {
					if(this.systemTags.indexOf(item.key)>0|| this.tagitemDic[item.key] == undefined) {
						this.notShowTagsArr.push(item)
					}
				})
				this.commonTagsList.forEach(item=>{
					item.active=false;
				})
				this.tagsRepeatList.forEach(item=>{
					if(this.detailObj.tagsObj[item.key] == item.value){
						item.active=true;
					}else{
						item.active=false;
					}
				})
				this.allTags.forEach(function(item, index, arr) {
					if(_this.detailObj.tagsObj[item.key] != undefined && _this.systemTags.indexOf(item.key)<0) {
						item['active'] = true;
					} else {
						item['active'] = false
					}
				})
				this.projects.forEach(item=>{
					if(item.id==this.selectedTask.pid){
						item.active=true;
					}else{
						item.active=false;
					}
				})
				
			},
			setTaskTag: function() {
				var _this = this;
				console.log(this.detailObj.tagsObj)
				return;
				var tagsObj = {};
				var tagsArr = [];
				this.allTags.forEach(function(item) {
					if(item['active']) {
						tagsArr.push(item);
						tagsObj[item.key] = item.name
					}
				})
				this.commonTagsList.forEach(function(item) {
					if(item['active']) {
						tagsArr.push(item);
						tagsObj[item.key] = item.name
					}
				})
				this.tagsRepeatList.forEach(function(item) {
					if(item['active']) {
						tagsArr.push(item);
						//重复和重复任务标签冲突
						tagsObj[item.key] = item.value
					}
				})
				this.projects.forEach(function(item) {
					if(item['active']) {
						tagsObj['pid'] = item.id;
					}
				})
				if(item.key=='repeat'&&item.value!=''){
						this.detailObj.tagsObj[item.key] = item.value
					}
				var delArr=[];
				this.detailObj.tagsArr.forEach(item1=>{
					tagsArr.forEach(item2=>{
						
					})
				})
				
				this.detailObj.tagsArr = this.detailObj.tagsArr.concat(this.notShowTagsArr);
				this.detailObj.tagsArr.forEach(item => {
					this.detailObj.tagsObj[item.key] = item.name
					if(item.key=='repeat'&&item.value!=''){
						this.detailObj.tagsObj[item.key] = item.value
					}
				})
				_this.tagDialogVisible = false;
				this.saveTask()
			},
			//所有标签点击
			tagsClick: function(item, type) {
				item.active = !item.active;
				if(type == 'all') {
					this.commonTagsList.forEach(item1=>{
						if(item.key==item1.key){
							item1.active=false;
						}
					})
				}else if(type == 'common') {
					this.allTags.forEach(item1=>{
						if(item.key==item1.key){
							item1.active=false;
						}
					})
				}  else if(type == 'repeat') {
					this.tagsRepeatList.forEach(item1 => {
						if(item.value != item1.value) {
							item1.active = false
						}
					})
				} else if(type == 'project') {
					this.projects.forEach(item1 => {
						if(item.id != item1.id) {
							item1.active = false
						}
					})
				}
			},
			closeTaskDetail: function() {
				if(this.$route.name == '今日任务') {
					$('.kanban-main-warp .kanban-main-container').animate({
						right: '45px'
					}, 300)
				} else {
					$('.kanban-main-warp .kanban-main-container').animate({
						right: '0px'
					}, 300)
				}
				$('.task-detail-container').animate({
					right: '-400px'
				}, 300)
			},
			changeTaskState: function(state) {
				var realState=state;
				if(this.selectedTask.state=='toggle'&&state=='toggle'){
					realState='started'
				}
				if(realState=='started'){
					if(this.clockTimer){
						clearInterval(this.clockTimer)
					}
					this.timerInterval(this.clockParams.remainTime);
				}else{
					clearInterval(this.clockTimer)
				}
				var taskItem=this.taskDic[this.selectedTask.id]
				this.doTaskEdit(taskItem, state, moment().format("YYYY-MM-DD HH:mm:ss"));
			},
			getCommonTags: function() {
				api.tagsrec({}).then(data => {
					if(data.errno != 0) {
						this.showNotice(data.errmsg, 'warning');
						return Promise.reject(data.errmsg);
					}
					data.data.forEach(item=>{
						item.active=false;
					})
					this.commonTagsList=data.data;
					return Promise.resolve(data);
				})
			}
		},
		mounted() {
			initPage();
			this.taskDetailHeight=$('.task-detail-container').height()
			var _this = this;
			this.memberList = this.members;
			this.memberList.forEach(function(item) {
				_this.memberListDic['fuid_' + item.fuid] = item;
			})
			this.allTags = this.tagitems.map(function(item, index, arr) {
				var item1 = Object.assign({}, item)
				item1['active'] = false
				return item1;
			})
			this.getCommonTags();
			this.tagsRepeatList.forEach(item=>{
				this.tagsRepeatDic[item.value]=item.name;
			})
		}
	}
</script>
<style>
	.task-detail button .el-loading-spinner .circular {
		width: 25px;
	}
	
	.v-modal {
		z-index: 2000 !important;
	}
	
	.el-picker-panel,
	.el-select-dropdown {
		z-index: 3000 !important;
	}
	/*.el-picker-panel.el-date-picker {
		z-index: 3000 !important;
	}*/
</style>